<script setup lang="ts">
import DictionaryList from './components/DictionaryList.vue';
import DictionaryItems from './components/DictionaryItems.vue';
import { fetchDictionaryList } from '@/api/endpoints/system/dictionary';
import type { Dictionary } from '@/api/endpoints/system/dictionary';

const dictionaryList = ref<Dictionary[]>([]);
const selectedDictionary = ref<Dictionary | null>(null);

onMounted(async () => {
  await loadDictionaryList();
});

async function loadDictionaryList() {
  try {
    const res = await fetchDictionaryList();
    dictionaryList.value = (res as any).data?.data as Dictionary[];
  } catch (error) {
    console.error('加载字典列表失败:', error);
    dictionaryList.value = [];
  }
}

function handleDictionarySelect(dictionary: Dictionary) {
  selectedDictionary.value = dictionary;
}

function handleDictionaryUpdate() {
  loadDictionaryList();
}
</script>

<template>
  <div class="h-full flex">
    <!-- 左侧字典列表 -->
    <div class="w-80 border-r border-border">
      <DictionaryList
        :dictionaries="dictionaryList"
        :selected-dictionary="selectedDictionary"
        @select="handleDictionarySelect"
        @update="handleDictionaryUpdate"
      />
    </div>

    <!-- 右侧字典项目 -->
    <div class="flex-1">
      <!-- 头部 -->
      <div class="p-4 border-b border-border">
        <div class="flex items-center justify-between">
          <div class="flex gap-1 items-center">
            <h3 class="text-lg font-semibold">
              {{ selectedDictionary?.name || '请选择字典' }}
            </h3>
            <p class="text-sm text-muted-foreground">
              {{ selectedDictionary ? `字典项目` : '选择左侧字典查看项目' }}
            </p>
          </div>
        </div>
      </div>

      <DictionaryItems
        v-if="selectedDictionary"
        :dictionary="selectedDictionary"
      />
    </div>
  </div>
</template>
